<template>
  <div>
    <el-menu
      mode="horizontal"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      unique-opened
      router
    >
      <el-menu-item v-for="item in links" :key="item.index" :index="item.index">
        <font-awesome-icon
          :icon="['fas', item.icon]"
          size="lg"
        ></font-awesome-icon>
        <span style="margin-left: 10px" slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
    <div><router-view></router-view></div>
  </div>
</template>

<script>
import { horizonBar } from "@/plugins/CONSTANTS";
export default {
  name: "Links",
  // 对象
  props: {},

  data() {
    return {
      links: horizonBar
    };
  },
  watch: {},
  mounted() {
    this.function();
  },
  methods: {
    function() {}
  }
};
</script>

<style scoped></style>
